var canvas = document.getElementById("canvas");

let ctx = canvas.getContext("2d");
let painting = false;

ctx.fillStyle = "black";//设置填充颜色
canvas.touchstart = () => {
  painting = true; //标记变量,用来控制程序是否运行,可类比红绿灯
  ctx.beginPath();//开始一段新的路径
  let offsetY = e.clientY - getOffsetY(e.target);
  let offsetX = e.clientX - getOffsetX(e.target);
  ctx.moveTo(offsetX, offsetY)
}
canvas.touchmove = () => {
  if (painting === true) {
    //下面这个arc方法四个参数分别是：横纵坐标，宽高，开始角度，结束角度
    let offsetY = e.clientY - getOffsetY(e.target);
    let offsetX = e.clientX - getOffsetX(e.target);
    ctx.lineTo(offsetX, offsetY);
    ctx.stroke();//绘制
    ctx.lineWidth = 2;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
  } else {
    console.log("啥都不做");
  }
}

canvas.onmousedown = (e) => {
  painting = true; //标记变量,用来控制程序是否运行,可类比红绿灯
  ctx.beginPath();//开始一段新的路径
  let offsetY = e.clientY - getOffsetY(e.target);
  let offsetX = e.clientX - getOffsetX(e.target);
  ctx.moveTo(offsetX, offsetY)
};

canvas.onmousemove = (e) => {
  if (painting === true) {
    //下面这个arc方法四个参数分别是：横纵坐标，宽高，开始角度，结束角度
    let offsetY = e.clientY - getOffsetY(e.target);
    let offsetX = e.clientX - getOffsetX(e.target);
    ctx.lineTo(offsetX, offsetY);
    ctx.stroke();//绘制
    ctx.lineWidth = 2;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
  } else {
    console.log("啥都不做");
  }
};

function getOffsetY(element) {
  let offsetY = element.offsetTop;
  let parentE = element.offsetParent;
  while (parentE !== null) {
    offsetY += parentE.offsetTop;
    parentE = parentE.offsetParent;
  }
  return offsetY;
}

function getOffsetX(element) {
  let offsetX = element.offsetLeft;
  let parentE = element.offsetParent;
  while (parentE !== null) {
    offsetX += parentE.offsetLeft;
    parentE = parentE.offsetParent;
  }
  return offsetX;
}

canvas.onmouseup = () => {
  painting = false;
};